<template>
  <div>
    <div class="Search-nav">
      <div class="arrow">
        <span class="iconfont iconjiantou2" @click="logOut"></span>
      </div>
      <div class="searchInput">
        <span class="iconfont iconsearch"></span>
        <input type="text" placeholder="请输入关键词" v-model="Keyword" />
      </div>
      <div class="btnSearch" @click="BtnSearchPost">搜索</div>
    </div>
    <div class="searchIdea" v-if="SearchResult.length==0">
      <!-- 历史记录 -->
      <div class="history">
        <div class="his-title">
          <h3>历史记录</h3>
        </div>
        <ul class="his-content">
          <li @click="triggerSearch(item)" v-for="(item,index) in history" :key="index">{{item}}</li>
        </ul>
      </div>
      <!-- 热门搜索 -->
      <div class="heatSearch">
        <div class="heat-title">
          <h3>热门搜索</h3>
        </div>
        <div class="heat-content">
          <ul class="heatList">
            <li>办公室小野否认解散</li>
            <li>办公室小野否认解散</li>
            <li>办公室小野否认解散</li>
            <li>办公室小野否认解散</li>
            <li>办公室小野否认解散</li>
          </ul>
        </div>
      </div>
    </div>
    <!-- //这里是搜索结果 -->
    <IndexPost v-else :post="post" v-for="(post,index) in SearchResult" :key="index"></IndexPost>
  </div>
</template>
<script>
// 引入文章列表组件
import IndexPost from "@/components/IndexPost.vue";
export default {
  components: {
    IndexPost
  },
  data() {
    return {
      SearchResult: [],
      Keyword: "",
      history: []
    };
  },
  watch: {
    Keyword(newVal) {
      if (newVal == "") {
        //如果关键字为空
        //清除搜索结果
        this.SearchResult = [];
      }
    },
    history(newVal) {
      // 先将变化的历史记录数组装换为字符串格式
      const historyStr = JSON.stringify(this.history); //这里history==newVal
      // 将历史记录进行本地存储
      localStorage.setItem("history", historyStr);
    }
  },
  mounted() {
    //将历史记录从本地中拿出来放到data中的history中
    const historyArr = JSON.parse(localStorage.getItem("history"));

    //判断history数组是否有数据，有的话就放到history中
    if (historyArr.length > 0) {
      this.history = historyArr;
    }
  },
  methods: {
    logOut() {
      if (this.SearchResult.length > 0) {
        // 清空关键字
        this.Keyword = "";
        this.SearchResult = [];
      } else {
        this.$router.back();
      }
    },
    BtnSearchPost() {
      this.$axios({
        url: "/post_search",
        method: "get",
        params: {
          keyword: this.Keyword
        }
      }).then(res => {
        console.log("这里是搜索结果", res);
        const { data } = res.data;
        this.SearchResult = data;
        //发送请求成功后先判断这个关键词有没有被记录
        if (this.history.indexOf(this.Keyword) < 0) {
          //数组中不存在，将关键词加进去
          this.history.push(this.Keyword);
        }
      });
    },
    triggerSearch(item) {
      //修改关键词
      this.Keyword = item;
      //调用搜索结果的函数
      this.BtnSearchPost();
    }
  }
};
</script>
<style lang="less" scoped>
.Search-nav {
  padding: 10px 22px;
  display: flex;
  box-sizing: border-box;
  justify-content: space-between;
  align-items: center;
  position: relative;
  .searchInput {
    width: 69.444vw;
    height: 10.556vw;
    line-height: 10.556vw;
    margin: 0 2.778vw;
    border: 1px solid #d7d7d7;
    border-radius: 20px;
    overflow: hidden;
    position: relative;
    box-sizing: border-box;
    input {
      width: 100%;
      border: none;
      background-color: #f2f2f2;
      font-size: 14px;
      text-indent: 3em;
    }
    .iconsearch {
      position: absolute;
      left: 20px;
      top: 3px;
      font-size: 15px;
    }
  }
  .btnSearch {
    font-size: 14px;
  }
}
.history {
  margin: 22px;
  border-bottom: 1px solid #d7d7d7;
  .his-title {
    margin-bottom: 20px;
    h3 {
      font-size: 14px;
      color: #333;
    }
  }
  .his-content {
    padding-bottom: 22px;
    font-size: 14px;
    color: #333;
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    li {
      width: 20%;
    }
  }
}
.heatSearch {
  margin: 22px;
  border-bottom: 1px solid #d7d7d7;
  .heat-title {
    margin-bottom: 20px;
    h3 {
      font-size: 14px;
      color: #333;
    }
  }
  .heat-content {
    .heatList {
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      li {
        width: 50%;
        font-size: 14px;
        margin-bottom: 20px;
        color: #333;
      }
    }
  }
}
</style>